<template>
    <div>
        <h2>{{title}}</h2>
        <p>{{$route.query.msg}}</p>
        <div>
            <input type="text" placeholder="请输入搜索内容" v-model="searchInput">
            <ul>
              <li v-for="item in list" :key="item.id">
                    <img :src="item.picture" alt="pic" style="width: 100px;">
                    <p>价格{{item.price}}</p>
                    <p>名称:{{item.shop}}</p>
              </li>
            </ul>
        </div>
    </div>
  </template>
  
  <!-- 
     1. 搜索框输入内容，侦听器侦听内容变量，调用商品搜索接口获取商品列表
         axios 网络库
  -->
  <script>
  import axios  from 'axios'
    export default {
        data() {
            return {
                title:'计算属性和侦听器',
                list:[],
                searchInput:''
            }
        },
        watch:{
          searchInput(newValue,oldValue){
            axios({
              method:'GET',
              url:'http://47.109.74.84:8089/api/shop/search',
              params:{
                keyword:newValue
              }
            }).then(res=>{
                this.list = res.data.resultInfo.list
            }).catch(err=>{
              console.log(err);
            })
            
          }
        }
       
       
    }
  </script>
  
  <style lang="css" scoped>
  
  </style>